<link rel="stylesheet" type="text/css" href="<?php echo JS_PATH;?>/ndtco/scrollable-buttons.css">	
<link rel="stylesheet" type="text/css" href="<?php echo JS_PATH;?>/ndtco/scrollable-horizontal.css">	
    <div id="random-product">
        <div class="header">
            <div class="headerleft">
            </div>
            <div class="headertitle">
            Random products
            </div>
            <div class="headerright">
            </div>
        </div>
<?php
$randomItems = $this->randomItems;
if (isset($randomItems[0])) {
?>
        <div class="content">
            <center>
            <table cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td class="centerleft"></td>
                    <td class="centercontent">
                        <a class="prevPage browse left"></a>
                        <div class="scrollable" id="scroller">	
                            
                            <!-- root element for the items -->
                            <div class="items">
                                <ul style="width:520px">

                        <?php
                            foreach($randomItems as $item):
                            ?>
                                <?php
                                $path = pathinfo($item['item_image'], PATHINFO_DIRNAME);
                                $fileName = pathinfo($item['item_image'], PATHINFO_BASENAME);
                                ?>
                                <li>
                                <a href="">
                                <img src="<?=ImageUtil::getImage($path,$fileName,100,100, 100,true)?>" class="border" width="100" height="100">
                                </a>
                                </li>
                        <?php
                            endforeach;
                        ?>
                            </ul>
                            </div>
                        </div>
                        <a class="nextPage browse right"></a>
                    </td>
                    <td class="centerright"></td>
                </tr>
            </table>
            </center>
        </div>
<?php    
}
?>
        <div class="footer">
            <div class="footerleft">
            </div>
            <div >
            </div>
            <div class="footerright">
            </div>
        </div>
    </div>
    
    
    <div style="height:10px;">
    </div>
 <link rel="stylesheet" href="<?php echo JS_PATH;?>/jquery/thickbox.css" type="text/css" />
 
 <script type="text/javascript" src="<?php echo JS_PATH;?>/jquery/jcarousellite_1.0.1.js"></script>
 
 
 <script type="text/javascript" src="<?php echo JS_PATH;?>/jquery/thickbox-compressed.js"></script>
<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(document).ready(function() {

$(function() {
    $(".items").jCarouselLite({
        btnNext: ".nextPage",
        btnPrev: ".prevPage",
        auto: 500,
        visible: 4,
        speed: 1000

    });
});

/*
// initialize scrollable together with the autoscroll plugin
window.api = $("#scroller").scrollable({speed:2000}).circular().autoscroll({
	api: true,
    interval:2000
}).navigator({naviItem: 'div',
});
*/
	
});
</script>
